//登录注册方法
function log_reg() {
    $('#window_float').html(`<div id="loginPage" class="animated bounceIn ">
    <div class="window_close">✖</div>
    <form id="login" class="login-form">

            <div class="form-group">
                    <input type="text" class="form-control login-field" name="userid" id="userid-login" value="" placeholder="请输入您的邮箱哦"  />
                    <label class="login-field-icon fui-user" for="login-name"></label>
                  </div>
      
                  <div class="form-group">
                    <input type="password" class="form-control login-field" value="" name="pwd" id="password-login" placeholder="请输入您的密码哦"/>
                    <label class="login-field-icon fui-lock" for="login-pass"></label>
                  </div>
                 
                  <div class="form-group">
                    <div class="g-recaptcha" data-sitekey="6LeBzVwUAAAAAAbLsJ5U5EjlF5ouu6VZ0hsIojMh" data-callback="flushStatus"></div>
                    </div>
                <div class="row">
                  <button class="btn btn-primary btn-lg btn-block " type="submit">登录</button>
                </div>
                <label class="checkbox" for="checkbox2">
                  <input type="checkbox" value="" id="checkbox2" name="nologin"  data-toggle="checkbox" class="custom-checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                  七天内免登陆
                </label>
                <a class="login-link forget-pwd" href="#">忘记了密码？</a>
                  <div class="row">
                  <a class="btn btn-primary btn-lg right-register" href="#">注册</a>
                  </div>
                  

    </form>
</div>
<div id="regPage" class="animated">
    <div class="window_close">✖</div>
    <form id="register">
        <div class="form-group">
            <lable for="userid">邮箱（必填）：</lable>
            <input class="form-control" type="text" id="userid" name="userid" placeholder="请输入您的邮箱哦" />
        </div>
        <div class="form-group">
            <lable for="password">密码（必填）：</lable>
            <input class="form-control" type="password" id="password" name="password" placeholder="请输入您的密码,不能让别人知道哦"
            />
        </div>
        <div class="form-group">
            <lable for="repassword">确认密码（必填）：</lable>
            <input class="form-control" type="password" id="repassword" name="repassword" placeholder="请在此输入您的密码哦"
            />
        </div>
        <div class="form-group">
            <lable for="nickname">昵称（必填）：</lable>
            <input class="form-control" type="text" id="nickname" name="nickname" placeholder="请告诉我们您的名字好记住您哦"
            />
        </div>
        <div class="form-group">
        <div class="row">
        <lable for="radio1" class="">性别（必选）：</lable>
        </div>
        <div class="row">
        
           <label class="radio  col-sm-6" for="radio1">
                  <input type="radio" name="optionsRadios1" value="man" id="radio1" data-toggle="radio" checked="checked" class="custom-radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                  我是男童鞋
                </label>

          
           <label class="radio col-sm-6" for="radio2">
                  <input type="radio" name="optionsRadios1" value="famale" id="radio2" data-toggle="radio"  class="custom-radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                  我是女童鞋
                </label>
                
            </div>
           
        </div>
  
        <div class="form-group">
            <lable for="tel">手机号(必填)：</lable>
            <input class="form-control" type="text" id="tel" name="tel" placeholder="联系方式很重要哦" />
        </div>
        <div style="text-align: center;" class="form-btn">
            <button type="submit" class="btn btn-info" style="position: absolute; left: 80px; bottom: 24px;">注册</button>
            <button type="button" class="btn btn-default" style="position: absolute; right: 80px; bottom: 24px;">返回</button>
        </div>
    </form>
</div>

<div id="forgetPage" class="animated">
    <div class="window_close">✖</div>
    <form id="forgetpwd" class="login-form">
        <div class="form-group">
            <lable for="useremail">请输入您的注册邮箱</lable>
            <input class="form-control" type="text" id="useremail" name="useremail" placeholder="请输入您的邮箱哦" />
        </div>

        <div class="row">
                  <button class="btn btn-primary btn-lg btn-block " type="submit">确认邮箱</button>
                </div>
                  <div class="row">
                  <a class="btn btn-primary btn-lg right-back" href="#">返回</a>
                  </div>
    </form>
</div>
    `);
    var flag = false

    function flushStatus(data) {
        console.log(grecaptcha.getResponse());//直接取得g-recaptcha-ressponse
        console.log(data);//利用回调函数取得
    }

    $('#window_float').css('display', 'block');
    $('.window_close').on('click', function () {
        // $('.loginPage').addClass("bounceOut");
        $('#window_float').css('display', 'none');
        $('#window_float').empty();
    });
    //点击登录框的注册
    $('a.right-register').on('click', function () {
        $('#loginPage').removeClass('bounceIn').addClass('fadeOutUp');
        $('#regPage').removeClass('fadeOutDown').addClass('fadeInUp');
        $('#regPage').css('display', 'block');
    });
    //点击注册框的返回
    $('#register .form-btn button[type="button"]').on('click', function () {
        $('#regPage').css('display', 'none');
        $('#regPage').removeClass('fadeInDown').addClass('fadeOutDown');
        $('#loginPage').removeClass('fadeOutUp').addClass('fadeInDown');
        $('#loginPage').css('display', 'block');
    });
    //点击找回密码
    $('a.forget-pwd').on('click', function () {
        $('#loginPage').removeClass('bounceIn').addClass('fadeOutUp');
        $('#forgetPage').removeClass('fadeOutDown').addClass('fadeInUp');
        $('#loginPage').css('display', 'none');
        $('#forgetPage').css('display', 'block');
    });
    //点击找回密码的返回
    $('a.right-back').on('click', function () {
        $('#forgetPage').css('display', 'none');
        $('#forgetPage').removeClass('fadeInDown').addClass('fadeOutDown');
        $('#loginPage').removeClass('fadeOutUp').addClass('fadeInDown');
        $('#loginPage').css('display', 'block');
    });

    $(':checkbox').on('change.radiocheck', function () {
        flag = !flag;
    });
    $('#userid-login').on('change', function () {
        $(this).css("border-color", "rgb(204,204,204)");
        $('#password-longin').css("border-color", "rgb(204,204,204)");
        $('label.error').remove();
    })
    $('#password-login').on('change', function () {
        $(this).css("border-color", "rgb(204,204,204)");
        $('#userid-login').css("border-color", "rgb(204,204,204)");
        $('label.error').remove();
    });

    $.validator.addMethod("phone", function (value, element, param) {
        //方法中又有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组)
        //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]);
        return new RegExp(/^1[3458]\d{9}$/).test(value);

    }, "手机号码不正确");
    $('#login').validate({
        rules: {
            userid: {
                required: true,
                email: true
            },
            pwd: {
                required: true,
                rangelength: [4, 20],
            },
        },
        messages: {
            userid: {
                required: '这里不能空着哦',
                email: "邮箱格式不正确"
            },
            pwd: {
                rangelength: '密码长度为4到20位哦',
                required: '这里不能空着哦'
            }
        },
        submitHandler: function (form) {
            var formData = {
                userid: $("#userid-login").val(),
                pwd: $("#password-login").val(),
                flag: flag,
            }
            console.log(formData);
           var next =  window.location.href.split("?")[1];
            $.post('/login?'+next, formData, function (res) {
                console.log(res);
                switch (res.msg) {
                    case 'success':
                        window.location.href = res.next;
                        break;
                    case 'wrong_id':
                        $('#userid-login').css("border-color", "#a94442");
                        $('#userid-notExist').remove();
                        $('#userid-login').after('<label class="error" id="userid-notExist">帐号不存在，请重新输入哦</label>');
                        break;
                    case 'wrong_pwd':
                        $('#password-login').css("border-color", "#a94442");
                        $('#password-wrong').remove();
                        $('#password-login').after('<label class="error" id="password-wrong">密码不对，请重新输入哦</label>');
                        break;
                }
            })
        }

    })
    $('#userid').on('keypress', function () {
        $(this).css("border-color", "rgb(204,204,204)")
        $('#userid-exist').remove();
    });

    $.validator.setDefaults({
        /*关闭键盘输入时的实时校验*/
        onkeyup: null,

    });

    //自定义校验规则
    $.validator.addMethod(
        //规则的名称
        "checkUsername",
        //校验的函数
        function (value, element, params) {

            //定义一个标志
            var flag = false;

            //value:输入的内容
            //element:被校验的元素对象
            //params：规则对应的参数值
            //目的：对输入的username进行ajax校验
            $.ajax({
                "async": false,
                "url": "user/checkusername",
                "data": {"method": "checkusername", "username": value},
                "type": "POST",
                "dataType": "json",
                "success": function (data) {
                    flag = data.isExist;
                }
            });


            //返回false代表该校验器不通过
            return !flag;
        }
    );

    $('#register').validate({
        rules: {
            userid: {
                required: true,
                email: true,
                checkUsername: true
            },
            password: {
                required: true,
                rangelength: [4, 20],
            },
            repassword: {
                required: true,
                equalTo: '#password'
            },
            nickname: {
                required: true,
                minlength: 2,
                maxlength: 6
            },
            tel: {
                phone: true
            }
        },
        messages: {
            userid: {
                email: "邮箱格式不正确",
                required: '这里不能空着哦',
                checkUsername: "用户名已经存在"
            },
            password: {
                rangelength: '密码长度为4到20位哦',
                required: '这里不能空着哦'
            },
            repassword: {
                equalTo: '前后两次密码不相同，注意检查一下哦',
                required: '这里不能空着哦'
            },
            nickname: {
                minlength: '名字最少有两位哦',
                maxlength: '名字不能超过六位哦',
                required: '这里不能空着哦'
            },
            tel: {}
        },
        submitHandler: function (form) {
            var formData = {
                userid: $("#userid").val(),
                pwd: $("#repassword").val(),
                nickname: $("#nickname").val(),
                sex: $("input[name='optionsRadios1']:checked").val(),
                tel: $("#tel").val()
            }
            console.log(formData)
            $.post('/register', formData, function (res) {
                if (res.success) {
                    $('.top-right').notify({
                        message: {text: '注册成功'},
                        type: custom[1]
                    }).show();
                    $('#regPage').removeClass('fadeInUp').addClass('fadeOutDown')
                    $('#loginPage').removeClass('fadeOutUp').addClass('fadeInDown')
                } else {
                    console.log(res);
                    $('#userid').css("border-color", "#a94442");
                    $('#userid-exist').remove();
                    $('#userid').after('<label class="error" id="userid-exist">' + res.msg.userid[0] + '</label>');
                }
            })
        }

    })
    $('#forgetpwd').validate({
        rules: {
            useremail: {
                required: true,
                email: true,
            }
        },
        messages: {
            useremail: {
                email: "邮箱格式不正确",
                required: '这里不能空着哦'
            }
        },
        submitHandler: function (form) {
            var formData = {
                userid: $("#userid").val(),
                pwd: $("#repassword").val(),
                nickname: $("#nickname").val(),
                sex: $("input[name='sex']:checked").val(),
                tel: $("#tel").val()
            }
            console.log(formData)
            $.post('/register', formData, function (res) {
                if (res.msg == 'success') {
                    alert('注册成功');
                    $('#regPage').removeClass('fadeInUp').addClass('fadeOutDown')
                    $('#loginPage').removeClass('fadeOutUp').addClass('fadeInDown')

                } else {
                    $('#userid').css("border-color", "#a94442");
                    $('#userid-exist').remove();
                    $('#userid').after('<label class="error" id="userid-exist">帐号已经存在，请重新输入哦</label>');
                }
            })
        }

    })
}